<template>
	<view class="th-file-box">
		<slot>
			<image class="file-image" :src="setImg(file.name)"></image>
		</slot>
		<view class="file-content-box">
			<view class="title-text text-zh" :style="{'-webkit-line-clamp':1}">{{file.name}}</view>
			<view class="desc-text">{{toMB(file.size)}}{{`&nbsp;&nbsp;&nbsp;`}}上传完成</view>
			<view class="text-priview">
				<view @tap="priview">预览</view>
				<view class="left36" @tap="predownload">下载</view>
			</view>

		</view>


	</view>
</template>

<script>
	export default {
		name: "th-file",
		data() {
			return {
				src: ""
			};
		},
		props: {
			file: {
				type: Object,
				default: {}
			}
		},
		methods: {
			toMB(size) {
				if (!size)
					return '未知大小'
				if (size < 1024)
					return size + 'KB'
				else
					return (size / 1024).toFixed(2) + 'M'
			},
			priview() {
				this.getDownloadFileType(this.file.url)
				return
			},
			predownload() {

				this.download(this.file.url)
			},
			download(path) {
				if (!path) return
				uni.showLoading({
					title: ''
				})
				let type = path.split('.')
				if (type.length > 0) {
					const image = ['bmp', 'jpg', 'jpeg', 'png', 'tif', 'gif', 'pcx', 'tga', 'exif', 'fpx', 'svg', 'psd',
						'cdr', 'pcd', 'dxf', 'ufo', 'eps', 'ai', 'raw', 'WMF', 'webp'
					]
					const video = ['avi', 'mov', 'rmvb', 'flv', 'mp4']
					const files = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf']
					if (image.indexOf(type[type.length - 1]) != -1) {
						//图片
						this.downloadFile(path, 'photo')
					} else if (video.indexOf(type[type.length - 1]) != -1) {
						//视频
						this.downloadFile(path, 'video')
					} else {
						//其它文件
						this.downloadFile(path, 'file')

					}
				} else {
					//其它文件
					this.downloadFile(path, 'file')
				}
			},

			//多媒体预览
			privewMedia(object) {
				uni.hideLoading()
				// #ifdef MP-WEIXIN
				uni.previewMedia({
					sources: [object]
				})
				// #endif
			},
			openDocument(filePath) {
				uni.hideLoading()
				uni.openDocument({
					filePath: filePath
				})

			},

			downloadFile(url, type = 'priview') {
				uni.downloadFile({
					url: url,
					success: (result) => {
						if (type == 'priview') {
							this.openDocument(result.tempFilePath)
						} else if (type == 'photo') {
							uni.saveImageToPhotosAlbum({
								filePath: result.tempFilePath,
								success: () => {
									uni.hideLoading()
									
									this.toast('已保存到系统相册')
								},
								fail: (err) => {
									console.error('保存失败:' + JSON.stringify(err))
									uni.hideLoading()
									this.toast('保存失败')
								}
							})

						} else if (type == 'video') {
							uni.saveVideoToPhotosAlbum({
								filePath: result.tempFilePath,
								success: () => {
									uni.hideLoading()
									this.toast('已保存到系统相册')
								},
								fail: () => {
									uni.hideLoading()
									this.toast('保存失败')
								}
							})


						} else if (type == 'file') {
							uni.saveFile({
								tempFilePath: result.tempFilePath,
								filePath: wx.env.USER_DATA_PATH + '/downloads/',
								success: () => {
									uni.hideLoading()
									this.toast('保存成功' + wx.env.USER_DATA_PATH + '/downloads/')
								},
								fail: (err) => {
									uni.hideLoading()
									this.toast('保存失败')
								}

							})
						}


					},
					fail: (err) => {
						//文件下载失败
						uni.hideLoading()
						if (type == 'priview') {
							this.toast('预览失败')
						} else {
							this.toast('操作失败')
						}
					}
				})
			},

			getDownloadFileType(path) {
				if (!path) return
				uni.showLoading({
					title: ''
				})
				let type = path.split('.')
				if (type.length > 0) {
					const image = ['bmp', 'jpg', 'jpeg', 'png', 'tif', 'gif', 'pcx', 'tga', 'exif', 'fpx', 'svg', 'psd',
						'cdr', 'pcd', 'dxf', 'ufo', 'eps', 'ai', 'raw', 'WMF', 'webp'
					]
					const video = ['avi', 'mov', 'rmvb', 'flv', 'mp4']
					const files = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf']
					if (image.indexOf(type[type.length - 1]) != -1) {
						this.privewMedia({
							url: path,
							type: 'image',
						})

					} else if (video.indexOf(type[type.length - 1]) != -1) {
						this.privewMedia({
							url: path,
							type: 'video',
						})

					} else if (files.indexOf(type[type.length - 1]) != -1) {
						this.downloadFile(path)

					} else {
						//无法识别类型
						uni.hideLoading()
						this.toast('当前类型无法预览')
					}




				} else {
					//无法识别类型
					uni.hideLoading()
					this.toast('当前类型无法预览')
				}
			},




			getType(file) {
				let imgType = ['bmp', 'jpg', 'jpeg', 'png', 'tif', 'gif', 'pcx', 'tga', 'exif', 'fpx', 'svg', 'psd', 'cdr',
					'pcd', 'dxf', 'ufo', 'eps', 'ai', 'raw', 'WMF', 'webp'
				]
				let fileTypev = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt','pdf']
				let videoType = ['avi', 'mov', 'rmvb', 'flv', 'mp4']
				let spertas = file.split('.')
				console.log('src:' + spertas)
				if (spertas.length > 0) {
					if (imgType.indexOf(spertas[spertas.length - 1]) != -1)
						return 'img'
					if (fileTypev.indexOf(spertas[spertas.length - 1]) != -1)
						return 'txt'
					if (videoType.indexOf(spertas[spertas.length - 1]) != -1)
						return 'vdo'
				}
				return 'unknow'
			},
			setImg(file) {
				let src = ''
				switch (this.getType(file)) {
					case 'img':
						src = ""
						break
					case 'txt':
						src = ''
						break
					case 'vdo':
						src = ''
						break
					default:
						src =''
						break
				}
				
				return src
			},
			toast(title){
				uni.showToast({
					title:title
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.th-file-box {
		width: 100%;
		min-height: 120rpx;
		background: #F6F7FB;
		border-radius: 8rpx;
		box-sizing: border-box;
		padding: 14rpx 24rpx;
		display: flex;
		align-items: center;
		border-radius: 8rpx;

		.file-image {
			width: 54rpx;
			height: 62rpx;
			white-space: nowrap;
		}

		.title-text {
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
			line-height: 42rpx;
			word-break: break-all;
		}

		.desc-text {
			font-size: 24rpx;
			font-weight: 500;
			color: #999999;
			line-height: 34rpx;
		}
	}

	.file-content-box {
		flex: 1;
		margin-left: 18rpx;
		position: relative;


		.text-priview {
			display: flex;
			align-items: center;
			position: absolute;
			right: 0;
			bottom: 0;
			font-size: 24rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			color: #0077FF;
			line-height: 34rpx;

			.left36 {
				margin-left: 36rpx;
			}
		}
	}
</style>